<template>
  <div class="right-wrap">
    <div class="look-bang">
      <h2>最受期待</h2>
      <span>查看完整榜单</span>
    </div>
    <div class="right-wrap-piaoF">
      <img :src="todayTop.topimage" alt="">
      <div class="right-title">
        <span class="right-one">{{todayTop.titles}}</span>
        <span class="right-two">上映时间{{todayTop.titmers}}</span>
        <span class="right-three">{{todayTop.qidai}}人想看</span>
      </div>
    </div>
    <ul class="bangdan-wrap">
      <li v-for="(item,index) in todayList">
        <span>
          <i>{{item.id}}</i>
          {{item.titles}}
        </span>
        <span class="bangdan-num">{{item.qidai}}想看</span>
      </li>
      
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      todayTop:'',
      todayList:[]
    };
  },
  mounted() {},
  methods: {
    gettoday(){
      this.$http.get('/Mrightwo').then(res=>{
        this.todayTop = res.data.data[0]
        this.todayList = res.data.data.splice(1)
        // console.log(this.todayTop);
        // console.log(this.todayList);

      }).catch(err=>{
        console.log(err);
      })
    }
  },
  created(){
    this.gettoday()
  },
};
</script>

<style lang="scss" scoped>
$colors: #ed4036;
.right-wrap {
  margin: -30px 0 0 0;
  width: 360px;
  min-height: 600px;
  /* background: rgb(206, 130, 130); */
  h2 {
    font-weight: 500;
    color: #feb312;
  }
  .look-bang{
    color: #feb312;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .right-wrap-piaoF:hover {
    background: #f6f6f6;
  }
  .right-wrap-piaoF {
    width: 360px;
    height: 194px;
    cursor: pointer;
    box-sizing: border-box;
    margin: 20px 0 0 0;
    display: flex;
    border: 1px solid #e9e6e6;
    .right-title{
      display: flex;
      flex-direction: column;
      justify-content: center;
      span{
        margin-bottom: 8px;
      }
      .right-one{
        font-size: 18px;
      }
      .right-two{
        font-size: 15px;
        color: #999999;
      }
      .right-three{
        font-size: 15px;
        color: #ffbc00;
      }
    }
    img {
      width: 140px;
      height: 194px;
      margin-right: 10px;
    }
    .right-wrap-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .one {
        font-size: 18px;
      }
      .two {
        color: #ee4137;
      }
    }
  }
  .bangdan-wrap{
      list-style: none;
      li:hover{
          background: #f6f6f6;
      }
      li{
          width: 360px;
          height: 55px;
          line-height: 55px;
          padding:10px 0 ;
          display: flex;
          justify-content: space-between;
          i{
              margin-right:5px ;
              color: #ee4137;
          }
      }
      .bangdan-num{
          color: #ee4137;
      }
  }
}
</style>
